<template>
  <div class="counter">
    <div class="decrease" @click="decreaseCart" :class="{'disabled': (count <= 1 || count <= lower) && !zeroable}"></div>
    <div class="amount">
      <input type="text" class="input-num" @blur="changeCount(number)" v-model="number">
    </div>
    <div class="increase" @click="increaseCart" :class="{'disabled': count >= 999 || count >= stock}"></div>
  </div>
</template>

<script>
export default {
  props: {
    obj: {
      type: Object
    },
    zeroable: {
      type: Boolean
    }, // 数量是否可以为0
    cartAttributeId: {
      type: String
    },
    amount: {
      type: [Number, String],
      required: true
    },
    lower: {
      type: Number
    },
    stock: {
      type: Number
    }
  },
  data () {
    return {
      count: (this.amount - 0) || 0,
      number: 0,
      isFinished: true // 是否完成输入
    }
  },
  methods: {
    // 数量加一
    increaseCart () {
      if (this.count >= 999 || this.count >= this.stock) {
        return false
      } else if (this.count < this.lower) {
        this.count = this.lower
      } else {
        this.count++
      }
      this.number = this.count
    },
    // 数量减一
    decreaseCart () {
      // 判断是否可以为0
      if (this.zeroable) {
        if (this.count <= 0) {
          return false
        } else {
          this.count--
        }
      } else {
        if (this.count <= 1 || this.count <= this.lower) {
          return false
        } else {
          this.count--
        }
      }
      this.number = this.count
    },
    // 填写数字
    changeCount (num) {
      this.count = this.number
    },
    // 通知父组件数据改变
    _emit (amount) {
      let obj = {
        amount: amount || this.count
      }
      if (this.cartAttributeId) {
        obj.cartAttributeId = this.cartAttributeId
      }
      if (this.obj) {
        let parma = Object.assign(this.obj, obj)
        this.$emit('amount-change', parma)
      } else {
        this.$emit('amount-change', obj)
      }
    }
  },
  mounted () {
    console.log(this.obj)
    this.number = this.count
  },
  watch: {
    'amount': function (val) {
      this.count = val
    },
    'count': function (newVal, oldVal) {
      if (newVal === '') { // 判断是否为空
        this.count = this.lower || 1
      } else if (!/^\d+$/.test(newVal)) { // 判断数量是否非法，若非法设为原值
        this.count = oldVal
      } else if (newVal > 999 || newVal > this.stock) { // 判断数量是否大于999或最大库存
        this.count = this.stock || 999
      } else {
        if (this.zeroable) { // 判断是否可为0
          if (newVal < this.lower) { // 当数量小于最小起批量时，将其设为0
            this.count = 0
          }
        } else {
          if (newVal < this.lower) { // 当数量小于最小起批量时，将其设为最小起批量
            this.count = this.lower
          }
        }
      }
      this.number = this.count
      this._emit(this.count)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/basic.scss';
.counter {
  position: relative;
  width: 90px;
  height: 26px;
  font-size: 0;
  line-height: 26px;
  border: solid 1px $border_color;
  .increase,
  .decrease {
    display: inline-block;
    vertical-align: top;
    width: 24px;
    height: 24px;
    background-position: center;
    background-repeat: no-repeat;
    &:hover {
      background-color: #f9f9f9;
      cursor: pointer;
    }
    &.disabled {
      background-color: #eeeeee;
      cursor: no-drop;
    }
  }
  .increase {
    background-image: url(../../assets/images/increase.png);
    background-size: 14px 14px;
  }
  .decrease {
    background-image: url(../../assets/images/decrease.png);
    background-size: 14px 2px;
  }
  .amount {
    position: relative;
    top: -1px;
    display: inline-block;
    vertical-align: top;
    width: 40px;
    height: 26px;
    overflow: hidden;
    .input-num {
      display: block;
      width: 100%;
      height: 100%;
      font-size: $fz_14;
      text-align: center;
      border: solid 1px $border_color;
      &:focus {
      border: solid 1px $green_l;
      }
    }
  }
}
</style>
